<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Article Management</title>
</head>
<body>
    <h1>文章管理</h1>

    <!-- 查询所有文章 -->
    <form th:action="@{/articles}" method="get" onsubmit="return false;">
        <button onclick="getAllArticles()">获取所有文章</button>
    </form>
    <div id="articles">
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>内容</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="article : ${articles}">
                    <td th:text="${article.id}"></td>
                    <td th:text="${article.title}"></td>
                    <td th:text="${article.content}"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 根据ID查询文章 -->
    <h2>根据ID获取文章</h2>
    <form th:action="@{/articles/{id}(id=${articleId})}" method="get" onsubmit="return false;">
        <input type="number" id="articleId" placeholder="输入文章ID" th:name="id" style="width: 200px;">
        <button onclick="getArticleById()">获取文章</button>
    </form>
    <div id="articleDetails">
        <div th:if="${article}">
            ID: <span th:text="${article.id}"></span>, 
            标题: <span th:text="${article.title}"></span>, 
            内容: <span th:text="${article.content}"></span>
        </div>
        <div th:if="${article == null}">
            未找到文章
        </div>
    </div>

    <!-- 新增、删除和更新操作 -->
    <div style="background: linear-gradient(90deg, green, gold); padding: 20px; margin-top: 20px;">
        <h2>新增文章</h2>
        <form th:action="@{/articles}" method="post">
            <input type="text" id="newTitle" placeholder="标题" th:name="title" style="width: 200px;">
            <textarea id="newContent" placeholder="内容" th:name="content" style="width: 200px;"></textarea>
            <button type="submit">新增文章</button>
        </form>

        <h2>更新文章</h2>
        <form th:action="@{/articles/{id}(id=${updateId})}" method="post">
            <input type="hidden" name="_method" value="PUT"> <!-- 添加 _method 隐藏字段 -->
            <input type="number" id="updateId" placeholder="文章ID" th:name="id" style="width: 200px;">
            <input type="text" id="updateTitle" placeholder="标题" th:name="title" style="width: 200px;">
            <textarea id="updateContent" placeholder="内容" th:name="content" style="width: 200px;"></textarea>
            <button onclick="updateArticle()">更新文章</button>
        </form>

        <h2>删除文章</h2>
        <form th:action="@{/articles/{id}(id=${deleteId})}" method="delete" onsubmit="return false;">
            <input type="number" id="deleteId" placeholder="文章ID" th:name="id" style="width: 200px;">
            <button onclick="deleteArticle()">删除文章</button>
        </form>
    </div>

    <script>
        function getAllArticles() {
            // Thymeleaf handles this on page load
        }

        function getArticleById() {
            const id = document.getElementById("articleId").value;
            // Thymeleaf handles this on page load
        }

        function updateArticleById(id) {
            window.location.href = `/articles/${id}`;
        }

        function deleteArticleById(id) {
            if (confirm("确定要删除该文章吗？")) {
                fetch(`/articles/${id}`, {
                    method: 'DELETE'
                })
                .then(() => {
                    alert("文章删除成功");
                    getAllArticles();
                });
            }
        }
    </script>
</body>
</html>